

<template>

    <div class="operatorder_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>财务</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="operatorder_list_card">

            <!-- title -->
            <el-row class="title">
                <el-col :span='6'>
                    <el-input style="width: 90%;" v-model="key_words" placeholder="请输入订单号" size="medium" class="input-with-select">
                        <template slot="prepend">订单号</template>
                    </el-input>
                </el-col>

                <el-col :span='8'>
                    <span class="text">上传时间：</span>
                    <el-date-picker v-model="select_time" style="width: 70%;" size="medium" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>

                <el-col class="filter_box" :span="2">
                    <el-button type="primary" style="padding: 9px 25px;" @click="search" size="medium" plain>筛选</el-button>
                </el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="operatorder_list_content">

                <!-- tab选项 -->
                <el-row class="xcx-tabs">
                    <el-col :span="24" style="width: 80%">
                        <el-button type="text" :class="(type === 1) ? '': 'disable'" @click="handleClick(1)">全部
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 2) ? '': 'disable'" @click="handleClick(2)">待支付
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 3) ? '': 'disable'" @click="handleClick(3)">已支付
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 4) ? '': 'disable'" @click="handleClick(4)">未确认
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 5) ? '': 'disable'" @click="handleClick(5)">已确认
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 6) ? '': 'disable'" @click="handleClick(6)">旅行中
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 7) ? '': 'disable'" @click="handleClick(7)">已结束
                        </el-button>
                        |
                        <el-button type="text" :class="(type === 8) ? '': 'disable'" @click="handleClick(8)">已取消
                        </el-button>
                    </el-col>
                </el-row>

                <div class="order_box">
                    <el-row type="flex" justify="center" align="middle" class="top">
                        <el-col :span="12">产品</el-col>
                        <el-col :span="2">买家</el-col>
                        <el-col :span="3">实付金额</el-col>
                        <el-col :span="2">订单确认</el-col>
                        <el-col :span="3">状态</el-col>
                        <el-col :span="2">操作</el-col>
                    </el-row>
                </div>

                <div class="order_item" v-if="tableData.length > 0" v-for="item in tableData" :key="item.id">
                    <el-row type="flex" align="middle" class="top">
                        <el-col :span="5">订单号：{{item.sn}}</el-col>
                        <el-col :span="6">下单时间：{{item.create_time}}</el-col>
                        <el-col :span="3">购买人数：2人</el-col>
                        <el-col :span="7">出发时间：{{item.depart_date}}</el-col>
                        <el-col :span="3" class="text_right">订单状态：{{item.oerder_status}}</el-col>
                    </el-row>

                    <el-row type="flex" justify="center" align="middle" class="table">
                        <el-col :span="12">
                            <div class="detailBox">
                                <div class="detail">
                                    <div class="img_box">
                                        <img :src="item.picture" alt="">
                                    </div>

                                    <!-- 详情 -->
                                    <div class="detail_right">
                                        <div class="item color1">{{item.goods_title}}</div>
                                        <div class="item sb_jc color3">
                                            <span>供应商：{{item.seller_id}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="2">
                            <div class="Buyer">
                                <span>{{item.nickname}}</span>
                                <span>{{item.mobile}}</span>
                            </div>
                        </el-col>
                        <el-col :span="3">￥{{item.pay_price}}.00</el-col>
                        <el-col :span="2" v-show="item.is_over == 1">已确认</el-col>
                        <el-col :span="2" v-show="item.is_over == 2">未确认</el-col>
                        <el-col :span="3" v-show="item.status == 1">正常订单</el-col>
                        <el-col :span="3" v-show="item.status == 2">已取消</el-col>
                        <el-col :span="2">
                            <div class="do_soming">
                                <div class="preview" @click='see_order(item.order_id)'>查看订单</div>
                                <div class="down_line" v-show="item.status != 2" @click="cancel_order(item.order_id)">取消订单</div>
                                <div class="preview" v-show="item.is_pay == 1" @click="refund_btn(item.order_id, item.total_price)">确认退款</div>
                                <div class="preview" v-show="item.is_pay == 1" @click="confirm_order(item.order_id)">确认订单</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div v-if="tableData.length == 0" class="not_data">很抱歉！暂无数据</div>

            </div>

            <!-- 对话框 -->
            <el-dialog title="退款" :visible.sync="dialogVisible" width="30%">

                <!-- 表单 -->
                <el-form style="padding-top: 30px;" class="my_form" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
                    <el-form-item label="订单金额：" prop="region">
                        <span>￥{{refund_order_price}}</span>
                    </el-form-item>

                    <el-form-item prop="money" label="退款金额：">
                        <el-input v-model="ruleForm.money" style="width: 95%" placeholder="请输入退款金额，不能大于未结算金额"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm_refund">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total, prev, pager, next" :total="count">
            </el-pagination>

        </el-card>
    </div>

</template>

<script src='../../../static/js/operatorder/operatorder_list.js'></script>

<style scoped>
@import "../../../static/css/operatorder/operatorder_list.css";
</style>



